<template>
  <div class="main-page">
    <img src="../../../assets/qm/header-top.png" />
    <!-- 专业介绍 -->
    <div class="special-intro">
      <img src="../../../assets/qm/top-2.png" />
      <div class="btn">立即问诊</div>
    </div>
    <!-- 健康小知识 -->
    <div class="jzxzs">
      <img src="../../../assets/qm/jkxzs.png" />
      <div class="btn" @click="handleClick(2)">立即查看</div>
    </div>
    <!-- 专家讲堂 -->
    <div class="jzjt">
      <img src="../../../assets/qm/zjjt.png" />
      <div class="btn" @click="handleClick(3)"></div>
    </div>
    <!-- 优选健康服务 -->
    <div class="yxfw">
      <img src="../../../assets/qm/bg.png" />
      <img src="../../../assets/qm/amy.png" class="img-amy" @click="toPage()" />
      <img src="../../../assets/qm/kt.png" class="img-kt" @click="toPage()" />
      <img src="../../../assets/qm/zb.png" class="img-zb" @click="toPage()" />
      <img src="../../../assets/qm/gf.png" class="img-gf" @click="toPage()" />
      <img src="../../../assets/qm/qs.png" class="img-qs" @click="toPage()" />
      <img src="../../../assets/qm/tt.png" class="img-tt" @click="toPage()" />
      <img src="../../../assets/qm/jk.png" class="img-2jk" @click="toPage()" />
      <img src="../../../assets/qm/7jk.png" class="img-7jk" @click="toPage()" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'QiMing',
  data() {
    return {};
  },
  methods: {
    back() {},
    handleClick() {
      // type 1:专业介绍(立即问诊) 2: 健康小知识(立即查看) 3: 专家讲堂
    },
    toPage() {
      const url = `${location.origin}`;
      console.log(url);
    }
  }
};
</script>

<style lang="scss" scoped>
.main-page {
  min-height: 100vh;
  background-color: #cbf5e9;
  padding-bottom: 29px;

  .special-intro {
    position: relative;
    margin: -44px auto 0;
    width: 327px;
    border-radius: 12px;
    //box-shadow: 0px 2px 7px 0px #a7d4c7;
    box-shadow: -5px 10px 10px -4px #a7d4c7, 5px 5px 10px -4px #a7d4c7;
    .btn {
      position: absolute;
      left: 104px;
      bottom: 16px;
      width: 122px;
      height: 32px;
      background: #b3782d;
      border-radius: 16px;
      box-shadow: 0px 1px 2px 0px #efcf88;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 2px;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .jzxzs {
    position: relative;
    width: 353px;
    margin: 18px auto 0;
    border-radius: 12px;
    box-shadow: 0px 2px 7px 0px #a7d4c7;
    .btn {
      position: absolute;
      left: 124px;
      bottom: 24px;
      width: 108px;
      height: 34px;
      background: linear-gradient(180deg, #08d6a2, #00cbab 98%);
      border-radius: 17px;
      font-size: 16px;
      font-weight: 700;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      letter-spacing: 2px;
      line-height: normal;
    }
  }
  .jzjt {
    position: relative;
    width: 353px;
    margin: 16px auto 0;
    border-radius: 12px;
    box-shadow: 0px 2px 7px 0px #a7d4c7;
    .btn {
      position: absolute;
      opacity: 0;
      left: 150px;
      bottom: 104px;
      width: 52px;
      height: 52px;
      background-color: #00eeee;
    }
  }
  .yxfw {
    width: 357px;
    margin: 16px auto 0;
    position: relative;

    .img-amy {
      position: absolute;
      top: 74px;
      left: 11px;
      width: 239px;
      height: 60px;
    }
    .img-kt {
      position: absolute;
      top: 74px;
      right: 10px;
      width: 94px;
      height: 85px;
    }
    .img-zb {
      position: absolute;
      top: 137px;
      left: 11px;
      width: 103px;
      height: 70px;
    }
    .img-gf {
      position: absolute;
      top: 137px;
      left: 117px;
      width: 133px;
      height: 85px;
    }
    .img-qs {
      position: absolute;
      top: 162px;
      right: 10px;
      width: 94px;
      height: 59px;
    }
    .img-tt {
      position: absolute;
      top: 210px;
      left: 11px;
      width: 103px;
      height: 70px;
    }

    .img-2jk {
      position: absolute;
      top: 225px;
      left: 117px;
      width: 230px;
      height: 54px;
    }

    .img-7jk {
      position: absolute;
      top: 283px;
      left: 11px;
      width: 335px;
      height: 60px;
    }
  }
}
</style>
